<template>
  <div>
    <el-card v-loading="loading">
      <div class="form">
        <el-form :inline="true">
          <el-form-item label="设备类型" prop="type">
            <el-select v-model="searchFormModel.type" placeholder="请选择--">
              <!-- <el-option
                v-for="(item, index) in deviceTypeList"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="设备名称">
            <el-input v-model="searchFormModel.name" placeholder="请输入设备名称"></el-input>
          </el-form-item>
          <el-form-item label="设备编号">
            <el-input v-model="searchFormModel.imei" placeholder="请输入设备名称"></el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
          <!-- <el-form-item>
            <el-button>重置</el-button>
          </el-form-item> -->
        </el-form>
      </div>
      <div slot="header" style="float: right">
        <el-button type="primary" size="small" @click="add">新增</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" width="68" fixed></el-table-column>
        <el-table-column label="实验题目" fixed>
          <template slot-scope="scope">
            <el-button type="text">{{ scope.row.experimentName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="预约使用时间">
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.day }} {{ scope.row.timeSlotName }}</span>
              <span>{{ scope.row.startTime }}到{{ scope.row.endTime }}</span>
            </div>
            {{ scope.row.day }}
          </template>
        </el-table-column>
        <el-table-column label="所在实验室">
          <template slot-scope="scope">
            <el-button type="text">{{ scope.row.labName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="small" type="text" plain> 去学习 </el-button>
            <el-button size="small" v-if="scope.row.status === 0" type="danger" plain>已取消</el-button>
            <div v-else-if="scope.row.status === 2 || scope.row.status === 1">
              <!-- <el-button size="mini" type="danger" plain @click="cancelExp(scope.$index)">取消预约</el-button> -->
              <el-button size="mini" type="primary" plain @click="submitExp(scope.row.id)">提交报告</el-button>
            </div>
            <el-button size="small" v-else-if="scope.row.status === 3" type="primary" @click="lookDetail(scope.row.id)" plain>待批阅</el-button>
            <el-button size="small" v-else-if="scope.row.status === 4" type="primary" @click="lookDetail(scope.row.id)" plain>已批阅</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部翻页器，超过一页的时候显示 -->
      <div v-if="page.total > page.pageSize" class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :pager-count="5"
          :total="page.total"
          :page-size="page.pageSize"
          :current-page="page.currentPage"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 取消预约的弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialog.cancel"
      width="400px"
      center>
      <span>您确定删除该预约吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.cancel = false">取 消</el-button>
        <el-button type="primary" @click="cancelSure">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="adedDialog.title"
      :visible.sync="adedDialog.show"
      @close="handleDialogClose(`formData`)"
      width="900px"
      center
    >
      <el-dialog
        width="30%"
        title="选择院系"
        :visible.sync="formData.innerVisible"
        append-to-body>
        <el-tree
          highlight-current
          class="filter-tree"
          :data="formData.treeData"
          :expand-on-click-node="false"
          node-key="id"
          @node-click="handleAreaClick"
          ref="tree" style="overflow: auto;height: 28rem;">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ data.name }}</span>
          </span>
        </el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button @click="formData.innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmArea">确 定</el-button>
        </div>
      </el-dialog>

      <el-form ref="formData" :model="formData" :rules="ruleForm" label-width="100px">
        <!-- <el-form-item label="设备类型" prop="type">
          <el-select v-model="formData.type" placeholder="请选择--">
            <el-option
              v-for="(item, index) in deviceTypeList"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="预约使用时间" prop="modelName">
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="选择院系" prop="modelName">
          <el-input v-model="formData.modelName"></el-input>
        </el-form-item>
        <el-form-item label="指导老师">
          <el-select v-model="formData.experiment" placeholder="请选择--">
            <!-- <el-option v-for="item in optionsList.experiment" :key="item.id" :label="item.name" :value="item.id"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="实验类型">
          <el-select v-model="formData.experiment" placeholder="请选择--">
            <!-- <el-option v-for="item in optionsList.experiment" :key="item.id" :label="item.name" :value="item.id"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="实验">
          <el-select v-model="formData.experiment" placeholder="请选择--">
            <!-- <el-option v-for="item in optionsList.experiment" :key="item.id" :label="item.name" :value="item.id"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="实验室类型">
          <el-select v-model="formData.experiment" placeholder="请选择--">
            <!-- <el-option v-for="item in optionsList.experiment" :key="item.id" :label="item.name" :value="item.id"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="实验室">
          <el-select v-model="formData.experiment" placeholder="请选择--">
            <!-- <el-option v-for="item in optionsList.experiment" :key="item.id" :label="item.name" :value="item.id"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="用途">
          <el-input
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 6}"
            placeholder="请输入用途">
          </el-input>
        </el-form-item>
        <el-form-item>
          <div class="form-button">
            <el-button type="primary">提交预约</el-button>
          </div>
        </el-form-item>
      </el-form>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="restForm(`formData`)">重 置</el-button>
        <el-button type="primary" v-show="adedDialog.showButton" @click="editSure(`formData`)">编 辑</el-button>
        <el-button type="primary" v-show="!adedDialog.showButton" @click="addSure(`formData`)">立即添加</el-button>
        <el-button @click="adedDialog.show = false">取 消</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      searchFormModel: {}, // 查询条件
      formData: {},
      loading: true,
      tableData: [],
      page: {
        total: 10,
        currentPage: 1,
        pageSize: 10
      },
      dialog: {
        cancel: false,
        currentIndex: ''
      },
      cancel: false,
      adedDialog: {
        show: false,
        content: '',
        title: '',
        showButton: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    add() {
      this.$router.push('/studentAppoint/newAppoint')
      // this.formData = {} // 富文本编辑器的重置有问题
      // this.adedDialog.title = '添加'
      // this.adedDialog.show = true
      // this.adedDialog.showButton = false
    },
    getList() { // 获取学生个人所有预约的实验分页列表
      this.loading = true
      request.get('/items/labAppointments/student', { params: {
        size: this.page.pageSize,
        current: this.page.currentPage,
        source: 0
      }}).then(res => {
        if (!res.code) {
          // this.tableData = res.content.records.filter(item => {
          //   return item.source === '0' // 筛选出学生预约的部分
          // })
          this.tableData = res.content.records
          this.page.total = this.tableData.length
          this.loading = false
        }
      })
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    },
    submitExp(id) {
      this.$router.push({
        path: `/studentAppoint/submitReport/${id}`,
        query: { // query传参
          submit: true
        }
      })
    },
    lookDetail(id) {
      this.$router.push({
        path: `/studentAppoint/exInfor/${id}`,
        query: { // query传参
          submit: false
        }
      })
    },
    cancelExp(index) {
      this.dialog.cancel = true
      this.dialog.index = index
    },
    cancelSure() {
      request.put('/items/labAppointments/status?appointmentId=' + this.tableData[this.dialog.index].id).then(res => {
        if (!res.code) {
          this.tableData[this.dialog.index].status = 0
          this.$message.success('取消成功')
        } else {
          this.$message.warning('取消失败')
        }
        this.dialog.cancel = false
      })
    }
  }
}
</script>

<style scoped>
.pagination {
  float: right;
  margin-top: 15px;
  margin-bottom: 15px;
}
</style>
